<template>
    <div class="fileContent">
        <div class="aside">

            <div :class="['aside-item', activeIndex == index ? 'active' : '', item.canDelete ? 'my' : '']"
                v-for="(item, index) in asideList" @click="handleItem(item, index)" :key="index">
                <div class="icon">
                    <svg v-if="item.typeName == '全部文件'" t="1740904451206" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3528" width="200" height="200">
                        <path d="M895.8 592.1a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#515151"
                            p-id="3529"></path>
                        <path
                            d="M928 687.9c-17.8 0-32.2 14.4-32.2 32.1v80.7c0 35.3-28.7 64-64 64H192.5c-35.3 0-64-28.7-64-64V225c0-35.3 28.7-64 64-64H415l82.7 143.3c6.6 11.4 19.2 17.2 31.5 15.8h302.5c35.3 0 64 28.7 64 64v80c0 17.7 14.4 32.1 32.2 32.1s32.2-14.4 32.2-32.1c0-0.8 0-1.6-0.1-2.4v-77.5C960 329 925.1 282 876.1 264v-1c0-68.2-55.8-124-124-124H476.2l-14.8-25.7c-7.4-12.9-18-16.2-27.3-16l-0.1-0.1H192.1c-70.7 0-128 57.3-128 128v574.1c0 70.7 57.3 128 128 128h640c70.7 0 128-57.3 128-128v-76.9c0.1-0.8 0.1-1.6 0.1-2.4 0-17.7-14.4-32.1-32.2-32.1zM747.1 202.8c31.6 0 58 23.2 63.1 53.4H543.9l-30.8-53.4h234z"
                            fill="#515151" p-id="3530"></path>
                    </svg>
                    <svg v-else-if="item.typeName == '相册'" t="1740904513429" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5482" width="200" height="200">
                        <path
                            d="M668.1 227.3H207.8C93.2 227.3 0 320.6 0 435.1v296.4c0 114.6 93.2 207.8 207.8 207.8H668c114.6 0 207.8-93.2 207.8-207.8V435.1c0.1-114.5-93.1-207.8-207.7-207.8z m139.8 504.2c0 77.1-62.7 139.8-139.8 139.8H207.8c-57.3 0-106.7-34.7-128.3-84.2l217.8-217.8 134.2 134.2c13.3 13.3 34.8 13.3 48.1 0l88.2-88.2 96.6 96.6c13.3 13.3 34.8 13.3 48.1 0 13.3-13.3 13.3-34.8 0-48.1L592 543.2c-13.3-13.3-34.8-13.3-48.1 0l-88.2 88.2-134.3-134.2c-13.3-13.3-34.8-13.3-48.1 0L68 702.6V435.1c0-77.1 62.7-139.8 139.8-139.8H668c77.1 0 139.8 62.7 139.8 139.8v296.4z"
                            fill="#707070" p-id="5483"></path>
                        <path
                            d="M627.440143 485.154298a53.1 53.1 0 1 0 75.093429-75.096051 53.1 53.1 0 1 0-75.093429 75.096051Z"
                            fill="#707070" p-id="5484"></path>
                        <path
                            d="M675.1 84.6h-288c-18.8 0-34 15.2-34 34s15.2 34 34 34h288c154.9 0 280.9 126 280.9 280.9v149.8c0 18.8 15.2 34 34 34s34-15.2 34-34V433.6c0-192.4-156.5-349-348.9-349z"
                            fill="#707070" p-id="5485"></path>
                    </svg>

                    <svg v-else-if="item.typeName == '我的分享'" t="1740904559333" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7337" width="200" height="200">
                        <path
                            d="M768.73106 703.537712c-35.606921 0-67.945574 14.793214-91.167479 38.359147l-309.109357-171.670082c9.116748-17.545439 14.621199-37.155048 14.621199-58.312783 0-12.55703-2.408198-24.426004-5.676466-35.950949l304.63699-189.215522c22.705863 20.469679 52.464304 33.198723 85.146985 33.198723 70.525785 0 127.978498-57.452713 127.978498-127.978498S837.708718 63.989249 767.182933 63.989249s-127.978498 57.452713-127.978498 127.978498c0 14.621199 2.92424 28.382328 7.396607 41.455401L344.716278 420.746514c-23.049891-22.705863-54.700487-36.983034-89.791366-36.983034-70.525785 0-127.978498 57.452713-127.978498 127.978498s57.452713 127.978498 127.978498 127.978498c25.630102 0 49.540064-7.740635 69.493701-20.813707l321.150344 178.378633c-3.096254 11.008903-5.160423 22.18982-5.160423 34.058794 0 70.525785 57.452713 127.978498 127.978498 127.978498s127.978498-57.452713 127.978498-127.978498S839.256845 703.537712 768.73106 703.537712zM767.182933 127.978498c35.262893 0 63.989249 28.726356 63.989249 63.989249s-28.726356 63.989249-63.989249 63.989249-63.989249-28.726356-63.989249-63.989249S731.92004 127.978498 767.182933 127.978498zM191.107677 511.913993c0-35.262893 28.726356-63.989249 63.989249-63.989249s63.989249 28.726356 63.989249 63.989249-28.726356 63.989249-63.989249 63.989249S191.107677 547.176886 191.107677 511.913993zM768.73106 895.505459c-35.262893 0-63.989249-28.726356-63.989249-63.989249s28.726356-63.989249 63.989249-63.989249 63.989249 28.726356 63.989249 63.989249C832.720309 866.951117 803.993953 895.505459 768.73106 895.505459z"
                            fill="#575B66" p-id="7338"></path>
                    </svg>

                    <svg v-else t="1740904603071" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8349" width="200" height="200">
                        <path
                            d="M781.041526 702.256158c-16.83134 0-34.491559-1.680269-52.873208-5.064342-85.793992-15.801894-151.311171-82.962503-213.415624-152.277172-62.652945 69.642127-129.096217 136.478348-217.570247 152.294568-70.713528 12.640901-130.713041 0.388856-173.508729-35.43607-40.167838-33.624818-61.400419-85.202521-61.400419-149.156088 0-64.520479 21.726837-116.567879 62.833047-150.514015 43.171242-35.655058 102.770642-47.420009 172.33909-34.026978 87.798649 16.901948 154.213267 86.10303 217.33284 156.718321 62.184271-69.613474 127.35148-138.577149 212.878388-156.647713l0 0c67.512626-14.261818 128.272455-3.003404 171.080423 31.705096 41.557488 33.694403 64.444754 87.947028 64.444754 152.765289 0 64.296375-21.394263 116.095112-61.869093 149.797701C869.62198 688.800705 828.659033 702.256158 781.041526 702.256158zM541.569456 514.873444c60.654428 67.89125 119.423927 129.252783 193.847963 142.959969 58.313104 10.744715 106.824981 1.688455 140.287093-26.172079 31.04711-25.853831 47.458895-67.01837 47.458895-119.045303 0-53.279461-17.161868-95.356788-49.629327-121.68134-33.737382-27.353998-81.32112-35.529191-137.603984-23.635303C661.437497 383.037836 602.76112 446.251553 541.569456 514.873444zM243.962338 362.741581c-37.352723 0-69.124334 10.190083-93.373621 30.216185-31.596625 26.093285-48.296983 67.471694-48.296983 119.659287 0 51.728128 16.276708 92.695169 47.070039 118.471229 33.419134 27.975145 82.102926 37.217646 140.779304 26.728758 77.165474-13.795191 136.761803-74.853825 197.828624-142.966109C426.068885 445.440072 366.364085 382.095371 289.87911 367.369995 273.809109 364.277564 258.462586 362.741581 243.962338 362.741581z"
                            fill="#272636" p-id="8350"></path>
                    </svg>
                </div>
                <div class="name">{{ item.label }}</div>
                <div class="del" @click="handleDel(item)"><i class="el-icon-delete"></i></div>
                <div class="edit" @click="handleEdit(item)"><i class="el-icon-edit"></i></div>
            </div>
            <div class="add" @click="handleAddType">+添加类型</div>
        </div>
        <router-view></router-view>

    </div>
</template>

<script>
import { getTypeList, deleteType } from "@/api/file"

export default {

    data() {
        return {
            typeDialog: false,

            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            showType: '1',
            folderName: '',
            dialogVisible: false,
            visible: false,
            x: 0,
            y: 0,
            tip: '按创建时间排序',
            asideList: [

            ],
            activeIndex: 3,
            curFileList: [
                {
                    name: '1.png',
                    time: '2021-07-15 16:30',
                },
            ],
            fileList: [
                {
                    type: 'folders',
                    name: '文件夹1',
                    time: '2021-07-15 16:30'
                }
            ]
        };
    },
    created() {
        // this.title = this.asideList[this.activeIndex].label;
        this.getTypeList()
    },

    mounted() {
        // this.$refs.fileboxRef.addEventListener("contextmenu", this.showMenu);
        // this.$children[0].curTypeItem = item
    },

    methods: {

        async getTypeList() {
            const res = await getTypeList()
            console.log(res, 'rrr');
            this.asideList = res.data.map(item => {
                return {
                    ...item,
                    label: item.typeName,
                    canDelete: item.canDelete == '' ? false : true
                }
            })


        },
        confirmDialogCreate() {

        },
        handleAddType() {
            // this.typeDialog = true
            // console.log(this.$children);
            this.$children[0].typeDialog = true
        },
        handleType() {
            if (this.showType == '0') {
                this.showType = '1'
            } else {
                this.showType = '0'
            }
        },
        handleCommand(v) {
            console.log(v, 'v');
            this.tip = v;
        },
        confirmCreate() {

        },
        handleMenuClick(flag) {
            if (flag == '0') {
                this.dialogVisible = true;
            } else if (flag == '1') {
                this.$refs.fileInput.click();

            } else if (flag == '2') {
                this.$refs.fileInput.click();

            }
        },
        showMenu(event) {
            event.preventDefault();
            this.x = event.clientX;
            this.y = event.clientY;
            this.visible = true;
            // 1
            // document.addEventListener("click", this.hideMenu);
        },
        hideMenu() {
            this.visible = false;
            document.removeEventListener("click", this.hideMenu);
        },
        handleAction(action) {
            console.log("选中操作:", action);
            this.hideMenu();
        },
        handleItem(item, index) {
            this.$children[0].curTypeItem = item
            this.activeIndex = index;
        },
        async handleDel(item) {
            this.$confirm('此操作将永久删除该类型, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await deleteType(item.id)
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getTypeList()
                } else {
                    this.$message.error('删除失败');
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleEdit(item) {
            this.$children[0].curTypeItem = item
            this.$children[0].typeName = item.typeName
            this.$children[0].typeDialog = true
        },
        handleFileChange(event) {
            const file = event.target.files[0];
            if (file) {
                this.selectedFile = file;
                console.log("上传的文件:", file);
            }
        }
    },
};
</script>

<style lang="less" scoped>
.fileContent {
    width: 100%;
    height: 100%;
    display: flex;

    .aside {
        width: 180px;
        height: 100%;
        padding: 15px;
        border-right: 1px solid rgba(132, 133, 141, .2);
        display: flex;
        align-items: center;
        flex-direction: column;

        .my,
        .edit {
            &:hover {
                .del {
                    display: block !important;
                }

                .edit {
                    display: block !important;

                }
            }
        }

        .aside-item {
            width: 100%;
            height: 40px;
            padding: 8px 3px 8px 7px;
            display: flex;
            align-items: center;
            border-radius: 12px;
            cursor: pointer;
            margin-bottom: 5px;

            .del {
                display: none;
            }

            .edit {
                display: none;

            }

            .icon {
                height: 24px;
                width: 24px;
                // background-color: red;
                margin-right: 15px;
            }

            .name {
                color: #25262B;
                font-size: 14px;
                flex: 1;
            }

            &:hover {
                background-color: #f5f5f6;
            }
        }

        .active {
            background-color: #ebebed !important;
        }

        .add {
            width: 100%;
            height: 40px;
            padding: 8px 3px 8px 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            cursor: pointer;
            color: #25262B;
            font-size: 14px;

            &:hover {
                background-color: #f5f5f6;
            }

        }

        .line {
            margin: 10px 0;
            width: 80%;
            height: 1px;
            background-color: rgba(132, 133, 141, .2);
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 20px 40px 20px 40px;

        .tableName {
            display: flex;
            align-items: center;

            img {
                width: 28px;
                height: 28px;
                margin-right: 10px;
            }
        }

        .context-menu {
            position: absolute;

            .menuBox {
                .menuItem {
                    width: 200px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    border-radius: 5px;

                    &:hover {
                        background-color: #f5f5f6;
                        cursor: pointer;
                    }
                }
            }
        }

        .titleSearch {
            height: 54px;
            display: flex;
            // justify-content: center;
            align-items: center;

            .search {
                width: 280px;
                height: 40px;
                border-radius: 8px;
                background-color: #f6f6f7;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #25262b5c;
                cursor: pointer;

                i {
                    margin: 0 8px 0 8px;

                    &::before {
                        font-size: 15px;
                    }
                }
            }
        }

        .title {
            -webkit-app-region: no-drag;
            color: #333;
            font-size: 18px;
            line-height: 1.4;
            font-weight: 600;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: 30px;
            margin: 20px 0;
        }

        .fileBox {
            flex: 1;
            display: flex;
            flex-direction: column;

            .edit {
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 12px;

                .left {
                    display: flex;
                    align-items: center;

                    .total {
                        margin-left: 10px;
                        font-size: 12px;
                        color: #25262BB8;
                    }
                }

                .right {
                    display: flex;
                    align-items: center;

                    .sort {
                        height: 28px;
                        cursor: pointer;
                        border-radius: 3px;
                        display: flex;
                        align-items: center;
                        padding: 0 8px;

                        &:hover {
                            background-color: #f5f5f6;
                        }

                        i {
                            margin-right: 5px;
                        }

                        font-size: 12px;
                        color: #25262BB8;

                        span {
                            // color: #25262B;

                        }
                    }

                    .change {
                        cursor: pointer;
                        border-radius: 3px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0 8px;
                        width: 28px;
                        height: 28px;
                        font-size: 14px;
                        color: #25262BB8;

                        &:hover {
                            background-color: #f5f5f6;
                        }
                    }
                }
            }

            .fileWrapper {
                flex: 1;
                display: flex;
                flex-wrap: wrap;

                .fileItem {
                    width: 133px;
                    height: 207px;
                    cursor: pointer;

                    .neir {
                        padding: 8px;
                        border-radius: 8px;
                        // height: 144px;

                        &:hover {
                            background-color: #f5f5f6;
                        }

                        .imgBox {
                            height: 90px;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name,
                        .date {
                            display: flex;
                            justify-content: center;
                            font-size: 14px;
                            color: #25262B;
                        }

                        .name {

                            margin: 5px 0;
                        }

                        .date {
                            font-size: 12px;
                            color: #25262b5c;

                        }
                    }


                }
            }
        }

        .hidden-input {
            display: none;
        }

        .addWjjDialog {
            color: red;

            ::v-deep {
                .el-dialog__body {
                    .imgBox {
                        width: 100%;
                        display: flex;
                        justify-content: center;

                        img {
                            width: 120px;
                            height: 100px;
                        }
                    }

                }

                .el-dialog__footer {
                    // .cancel {
                    //     background: #ffffff;
                    //     border: #25262B 1px solid;
                    //     color: #333;
                    // }
                }
            }
        }
    }
}
</style>